<template>
  <div class="pd-45">
    <a-form ref="formRef" :model="registerForm" :rules="rules" hideRequiredMark>
      <a-form-item label="账号" name="username">
        <a-input v-model:value="registerForm.username" placeholder="输入手机号" />
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input v-model:value="registerForm.password" placeholder="输入密码" />
      </a-form-item>
      <a-form-item>
        <a-button style="width: 100%" type="primary" @click="onRegister">
          立即注册
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts">
import { ValidateErrorEntity } from 'ant-design-vue/lib/form/interface'
import { defineComponent, reactive, ref, UnwrapRef } from 'vue'
import { FormState } from '../type'
export default defineComponent({
  setup () {
    const formRef = ref()
    const rules = {
      username: [{ required: true, message: '请输入手机号' }],
      password: [{ required: true, message: '请输入密码' }]
    }
    const registerObj = {
      username: '',
      password: '',
      a: ''
    }
    const registerForm: UnwrapRef<FormState> = reactive(registerObj)
    // const formRef = ref<InstanceType<typeof ElForm>>()
    const onRegister = () => {
      formRef.value
        .validate()
        .then(() => {
          console.log('values', registerForm)
        })
        .catch((error: ValidateErrorEntity<FormState>) => {
          console.log('error', error)
        })
    }
    return {
      rules,
      formRef,
      registerForm,
      onRegister
    }
  }
})
</script>
